<template>
    <div class="physical-room">
        <CheckItem :show.sync="checkItemModal" :data="checkItem" @save="saveCheckItem" :model="model" :itemID="itemID"></CheckItem>
        <modal :show.sync="showTemplateModal" id="template-modal" :dialogCSS="{'width': '70%'}">
            <template slot="header">
                Reply Template
            </template>
            <template slot="body">
                <div>
                    <span class="text-danger" style="font-size: 12px;">* Enter words that needs to be replaced by surround them with {}</span>
                    <tree v-if="treeData.length" id="jp-reply-tree" :data="treeData"
                          @cancelModal="showTemplateModal = false"
                          @showModal="showTemplateModal = true"
                          @create="createTemplate"
                          @delete="deleteTemplate"
                          @update="updateTemplate"
                    >
                    </tree>
                </div>
            </template>
            <template slot="footer">
                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
            </template>
        </modal>

        <ItemDetail :loading="tableLoading" :show.sync="showModal" :value="item" :title="`${action} Item`" :id="itemID" @submit="confirmSubmit"
                    :action="action" :height="600"></ItemDetail>
        <div class="row">
            <div class="col-md-12 p-0">
                <filter-form v-if="filters.length" :columns="filters" @submit="submit"></filter-form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12  bg-white p-0 m-0">
                <item-table title="Physical Room List" :columns="defaultColumns" :data="data" :loading="tableLoading" @sort="sort"
                            :total="total" :model="model" isColumns isAdd @add="addItem"  isExport @export="exportExcel"
                >
                    <template slot="room_equipment" slot-scope="props">
                        <div class="td-ellipsis">
                            {{props.item.room_equipment}}
                        </div>
                        <i v-tooltip.top="'Show Detail'" class="fif fif-ellipsis text-info" @click="showTdDetail(props.item.room_equipment)"></i>
                    </template>
                    <template slot="occupancy" slot-scope="props">
                        <div class="progress" style="height: 16px; width: 100px;">
                            <div role="progressbar" aria-valuenow=""
                                 aria-valuemin="0" aria-valuemax="100"
                                 class="progress-bar progress-bar-info"
                                 :style="{'width': parseFloat(props.item.occupancy) * 100 + '%'}">
                                <span style="line-height: 15px; font-size: 8px; color: #FFF">{{(parseFloat(props.item.occupancy) * 100).toFixed(0) + '%'}}</span>
                            </div>
                        </div>
                    </template>

                    <template slot="physical_room_id" slot-scope="props">
                        <div>
                            {{props.item.physical_room_id}}
                            <span style="margin-bottom: 6px;width: 6px;height: 6px; border-radius: 50%; display: inline-block;"
                                  :class="{'bg-success': props.item.room_service_status, 'bg-danger': !props.item.room_service_status}"></span>
                        </div>
                    </template>

                    <template slot="is_active" slot-scope="props">
                                <span class="label label-danger" v-if="!props.item.is_active">
                                    inactive
                                </span>
                        <span class="label label-success" v-else>
                                    active
                                </span>
                    </template>
                    <template slot="actions" slot-scope="props">
                        <button v-tooltip.top="'Edit'" type="button" class="btn btn-info btn-outline btn-circle btn-md m-r-5"
                                @click="editItem(props)">
                            <i class="fif fif-edit"></i>
                        </button>
                        <button v-tooltip.top="'Delete'" type="button" class="btn btn-danger btn-outline btn-circle btn-md m-r-5"
                                @click="deleteItem(props)">
                            <i class="fif fif-delete"></i>
                        </button>
                        <button v-tooltip.top="'Calendar'" type="button" class="btn btn-primary btn-outline btn-circle btn-md m-r-5"
                                @click="toCalendar(props)">
                            <i class="fif fif-calendar"></i>
                        </button>
                        <button v-tooltip.top="'Template'" type="button" class="btn btn-warning btn-outline btn-circle btn-md m-r-5"
                                @click="showTemplate(props)">
                            <i class="fif fif-template"></i>
                        </button>

                        <button v-tooltip.top="'Sync Listing'" type="button" class="btn btn-primary btn-outline btn-circle btn-md m-r-5"
                                @click="sync(props)">
                            <i class="fif fif-sync"></i>
                        </button>

                        <!--<button type="button" class="btn btn-primary btn-outline btn-circle btn-md m-r-5"-->
                                <!--@click="checkList(props, model)">-->
                            <!--<i class="fif fif-check_list-border"></i>-->
                        <!--</button>-->

                    </template>
                </item-table>
                <v-paginate :pageCount="pageCount" :page="page" @change="changePage"></v-paginate>
            </div>
        </div>
    </div>
</template>

<script>
    // components
    import vPaginate from '@/components/widgets/Pagination'
    import ItemTable from '@/components/widgets/ItemTable'
    import ItemDetail from '@/components/widgets/ItemDetail'
    import FilterForm from '@/components/widgets/FilterForm'
    import Modal from '@/components/widgets/Modal'
    import tree from '@/components/widgets/Tree'
    import {searchModel, addModel, deleteModel, updateModel} from '@/api/model'
    import CheckItem from '@/components/widgets/CheckItem'
    // mixin
    import {lifeHookMixin, itemMixin, checkListMixin} from '@/mixins/item'
    import {syncListingInfo} from "@/api/room";
    import swal from 'sweetalert'

    export default {
        name: "PhysicalRoom",
        components: {vPaginate, ItemTable, FilterForm, ItemDetail, Modal, tree, CheckItem},
        mixins: [lifeHookMixin, itemMixin, checkListMixin],
        data() {
            return {
                item: null,
                showTemplateModal: false,
                treeData: []
            }
        },
        created() {
            // model
            this.model = 'PhysicalRoom';
            console.log(this.$route)
        },
        methods: {
            sync(props) {
                this.tableLoading = true
                if (props.item.physical_room_id) {
                    syncListingInfo({physical_room_id: props.item.physical_room_id}).then(res => {
                        swal("success", "", "success")
                        this.tableLoading = false
                    }).catch(e => this.tableLoading = false)
                }
            },
            toCalendar(props) {
                window.open(`#/physicalroomcalendar/${props.item.physical_room_id}`)
            },
            showTemplate(props) {
                this.item = props.item
                this.getReplyTemplate()
            },
            createTemplate(node) {
                let item = {
                    lang: 'physical',
                    mid: node.id,
                    parent: node.original.parent,
                    node_type: node.original.node_type,
                    icon: node.icon,
                    text: node.text,
                    pid: this.item.physical_room_id
                }
                addModel('MessageTemplate', item).then(res => {
                    this.getReplyTemplate()
                }).catch( e => {
                    this.getReplyTemplate()
                })
            },
            deleteTemplate(node) {
                if (node.original.pk) {
                    swal({
                        title: "Are you sure?",
                        text: "Remove this item",
                        icon: "warning",
                        dangerMode: true,
                        buttons: true,
                    }).then((willDelete) => {
                        if (willDelete) {
                            this.tableLoading = true
                            deleteModel('MessageTemplate', node.original.pk).then(res => {
                                this.tableLoading = false
                                swal("success", "", "success")
                                this.getReplyTemplate()
                            }).catch(e => {
                                this.tableLoading = false
                                this.getReplyTemplate()
                            })
                        }
                    })
                }
            },
            updateTemplate(node, oldText) {
                if (node.original.pk) {
                    updateModel('MessageTemplate', node.original.pk, {
                        'text': node.text
                    }).then( res => {
                        this.tableLoading = false
                        this.getReplyTemplate()
                    }).catch(e => {
                        this.getReplyTemplate()
                    })
                }
            },
            getReplyTemplate() {
                searchModel('MessageTemplate', {
                    page_size: 999999,
                    search_keys: {
                        pid: this.item.physical_room_id
                    }
                }).then( res => {
                    if (res.data.list.length) {
                        this.treeData = res.data.list
                    } else {
                        this.createTemplate({
                            id: '#' + this.item.physical_room_id,
                            icon: 'fif fif-world',
                            original: {
                                parent: '#',
                                node_type: 'group',
                            },
                            text: this.item.physical_room_id
                        })
                    }
                    this.showTemplateModal = true
                })
            },
        }
    }
</script>

<style scoped>

</style>